<template>
  <div style="padding: 0px;margin: 0px">
    <el-row style=" background: #fff;height: 50px" class="pt-2 pb-2 pl-3 pr-3">
      <el-col :span="24">
        <div style="float: right;margin-top: 10px">
          <el-button type="primary" icon="el-icon-refresh-right" plain @click="refresh">&nbsp;刷新
          </el-button>
          <el-button type="primary" icon="el-icon-document-add" plain @click="onAddUser">&nbsp;新增
          </el-button>
          <el-button type="primary" plain icon="el-icon-edit"  @click="onEditUser()">&nbsp;编辑
          </el-button>
          <el-button type="primary" icon="el-icon-delete" plain @click="onDelete" style="margin-right: 5px">&nbsp;删除
          </el-button>
          <el-button icon="el-icon-menu" type="primary" plain @click="roleOrganization()">机构授权</el-button>
          <el-button icon="el-icon-s-operation" type="primary" plain @click="handlePerson">反向授权</el-button>
          <el-button icon="el-icon-s-operation" type="primary" plain @click="handleUserUser">&nbsp;分配用户</el-button>
        </div>
      </el-col>
    </el-row>
    <vxe-table
      ref="mytable"
      :height="heightY"
      :data="articlesData"
      style="width: 100%;margin-top: 10px"
      :row-config="{ useKey: true, keyField: 'roleId' }"
      border
      highlight-current-row
      :current-row-key="idSelected"
      @current-change="selectChange"
    >
      <vxe-column
        type="seq"
        width="40"
      />
      <vxe-column
        field="roleName"
        title="角色名称"
        sortable
        width="220"
      />

      <vxe-column
        field="roleId"
        title="角色值"
      />
    </vxe-table>

    <div class="row" style="background: #fff;">
      <div class="col-sm text-sm-left text-left ml-3 mt-1  ">
        <vxe-pager
          background
          align="left"
          :current-page="currentPage"
          :page-size="perPage"
          :total="totalItems"
          :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
          @page-change="handleSizeChange">
        </vxe-pager>
      </div>
      <div>
      </div>
    </div>

    <role-add v-if="roleFlag" ref="roleRefs" @initData="initData"></role-add>
    <role-edit v-if="roleEditFlag" ref="roleEditRefs" @initData="initData"></role-edit>
    <role-tree v-if="roleTreeFlag" ref="roleTreeRefs" @initData="initData"></role-tree>
    <role-person v-if="rolePersonFlag" ref="rolePersonRefs" @initData="initData"></role-person>
    <userRolePopTwo v-if="userRolePopTwoFlag" ref="userRolePopTwoRefs" @onChange="handleSelectChange"></userRolePopTwo>
  </div>
</template>

<script>
import { getRoleList,getRoleDelete} from '@/api/datacentersg/achives/documentApi'
import userRolePopTwo from "@/views/datacentersg/archives/documentRole/userRolePopTwo"
import roleAdd from "@/views/datacentersg/archives/documentRole/roleAdd"
import roleEdit from "@/views/datacentersg/archives/documentRole/roleEdit"
import roleTree from "@/views/datacentersg/archives/documentRole/roleTree"
import rolePerson from "@/views/datacentersg/archives/documentRole/rolePerson"
import store from "@/store";

export default {
  name: 'UserList',
  components: {
    roleAdd,
    roleEdit,
    roleTree,
    rolePerson,
    userRolePopTwo
  },
  data: () => ({
    options: [{
      value: 'roleName',
      label: '角色名称'
    }],
    value: '',
    perPage: 20,
    heightY: window.innerHeight - 230 + 'px',
    roleFlag:false,
    roleEditFlag:false,
    roleTreeFlag:false,
    rolePersonFlag:false,
    idSelected: '',
    articlesData: [],
    originalArticlesData: [],
    dialogTableVisible: false,
    currentPage: 1,
    showAddUser: false,
    totalItems: 0,
    role: '',
    configValue: '',
    searchValue: '',
    userRolePopTwoFlag:false,
    options:[{
      value: 'roleName',
      label: '角色名称'
    }],
    selectList:[],
  }),

  mounted() {
    this.initData() // 初始化列表数据
  },

  methods: {
    selectChange(currentRow) {
      this.role = currentRow.row
    },
    handleSelectChange(list){
      this.selectList = [...list]
      console.log(this.selectList,"selectList");
    },
    handleUserUser(){
      if (this.role.length == 0 || this.role == undefined) {
        this.$message({
          type: 'warning',
          message: '请选中一行'
        });
        return;
      }
      this.userRolePopTwoFlag = true;
      this.$nextTick(()=>{
        this.$refs.userRolePopTwoRefs.initData(this.role,[...this.selectList]);
      })
    },
    handleSizeChange(val) {
        this.perPage = val.pageSize
        this.currentPage = val.currentPage
      this.initData()
    },
    onchangeperPage() { // 点击每页显示数量，切换数据,默认再从第一页显示
      this.currentPage = 1
      this.initData()
    },
    refresh() {
      this.initData()
    },
    handlePerson(){
      if (this.role.length == 0 || this.role == undefined) {
        this.$message({
          type: 'warning',
          message: '请选中一行'
        });
        return;
      }
       this.rolePersonFlag = true;
       let params = {
          roleId:this.role.roleId,//必传
      }
       this.$nextTick(()=>{
          this.$refs.rolePersonRefs.initSelect(params);
       })
    },
    onAddUser() {
      this.roleFlag = true
      this.$nextTick(() => {
        this.$refs.roleRefs.initAdd()
      })
    },
    async onEditUser() {
      if (this.role != '') {
        this.roleEditFlag = true;
        this.$nextTick(() => {
          this.$refs.roleEditRefs.initEdit(this.role)
        })
      } else {
        this.$message({
          message: '请选中需要修改的信息！',
          type: 'warning'
        })
      }
    },
    async initData() {
      const that = this
      // 组装分页参数
      const params = {
         userId:store.getters.user_id.toString(),
         token: store.getters.token.toString(),
         data:{
          'currentPage': this.currentPage, // 当前多少页
          'pageSize': this.perPage, // 每页显示数据
         }
      }
      const R = await getRoleList(params)
      const data = R.resultdata
      this.totalItems = data.count // 设置总记录数
      this.articlesData = data.data // 填充列表数据
      this.$nextTick(() => {
        this.$refs.mytable.recalculate()
      })
    },
    async onDelete() {
      if (this.role != '') {
        this.$confirm('确定删除当前行?', '操作提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const params = {
            userId:store.getters.user_id.toString(),
            token: store.getters.token.toString(),
            data:{
              'roleId': this.role.roleId
            }
          }
          getRoleDelete(params).then((data) => {
              this.$message({
                  type: 'success',
                  message: '操作成功'
              })
            this.initData()
          })
        })
      } else {
        this.$message({
          type: 'warning',
          message: '请选择一条记录'
        })
      }
    },
    roleOrganization() {
      if (this.role != '') {
        this.roleTreeFlag = true;
        let params = {
          roleId:this.role.roleId,//必传
        }
        this.$nextTick(()=>{
          this.$refs.roleTreeRefs.initItemPermissions(params);
          this.$refs.roleTreeRefs.refsh();
        })
      } else {
        this.$message({
          message: '请选中需要分配的人员！',
          type: 'warning'
        })
      }
    },
  }

}
</script>
<style scoped>
>>>.vxe-header--column .vxe-cell--title{
    font-size: 12px;
    font-weight: normal;
    color:#909399;
  }
  >>>.vxe-cell--label{
    font-size: 12px;
  }
</style>
